<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>常用选择器</title>
</head>
<style>
    ul{
        padding: 0;
        margin: 0;
        width: 500px;
        border: 1px dashed #666;
        padding: 10px 5px;
    }
    ul:after{
        content: '';
        display: block;
        clear: both;
    }
    ul li{
        list-style: none;
        float: left;
        width: 40px;
        height: 40px;
        line-height: 40px;
        text-align: center;
        box-shadow: 2px 2px 2px #888;
        background-color: skyblue;
        margin: 5px;
        border-radius: 50%;
    }
    /*id选择器*/
    #item1 {
        background-color: coral;
    }
    .item2{
        background-color: gold;
    }
    /*类选择器*/
    ul li[class]{
        background-color: blueviolet;
    }
    ul li[class^= "cat"]{
        background-color: grey;
    }
    ul li[class$="pig"]{
        background-color: red;
    }
    ul li[class*="t"]{
        background-color: green;
    }
    /*//后代选择器,层级选择器*/

    body ul li {
        border: 1px solid black;
      }
    /*子选择器*/
    ul > li[class^= "pig"]{
        background-color: greenyellow;
    }

    /*相邻选择器*/

    ul  li[class$= "pig"] ~ * {
        background-color: black;
        color: white;
    }

    /*相邻选择器*/
    ul li[class$="pig"] + li
    {
        background-color: pink;
    }

    /*群组选择器*/
    h1. p{
        font-size: 2rem;
        font-width: lighter;
        margin: 0;
    }

    a{
        font-size: 2rem;
    }

    /*状态选择器a标签*/
    a:link{
        color: red;
    }

    /*访问后*/
    a:visited{
        color: orange;
    }

    a:focus{
        color: purple;
    }
    a:hover{
        color: green;
    }
    a:active{
        color: blue;
    }


    /*位置选择器*/
    ul li:first-child{
        background-color: #efefef !important;
    }

    ul li:last-child{
        background-color: red;
    }
    ul li:nth-child(5)
    {
        background-color: red;
    }

    ul li:nth-child(odd)
    {
        background-color: purple;
    }

    ol:only-child{
        background-color: lawngreen;
    }
    ol li:only-child{
        background-color: lawngreen;
    }
    ul li:nth-last-child(3){
        background-color: red;
    }

    ol li:nth-of-type(2){
        background-color: wheat;
    }

    /*空元素操作标签*/
    :empty{
        width: 220px;
        height: 270px;
        background-color: orange;
    }
    :empty:after{
        content: "dadadada";
    }


</style>
<body>
<ul>
    <li id="item1">1</li>
    <li class="item2">2</li>
    <li class="cat dog pig">3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
</ul>

<h1>css选择器大法</h1>

<p>imppppppppp</p>

<a href="http;//www.php.cn">php</a>

<ol>
    <li>列表项1</li>
</ol>

<ol>
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
</ol>

<ol>
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
    <li>列表项4</li>
</ol>

<div></div>

</body>
</html>